<template>
  <div class="cart-item">
    <span>{{ item.name }} - ¥{{ item.price }} - 数量: {{ item.quantity }}</span>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="remove">删除</button>
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      required: true
    }
  },
  methods: {
    increment() {
      this.$store.dispatch('incrementQuantity', this.item.id)
    },
    decrement() {
      this.$store.dispatch('decrementQuantity', this.item.id)
    },
    remove() {
      this.$store.dispatch('removeItem', this.item.id)
    }
  }
}
</script>

<style scoped>
.cart-item {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ddd;
}

button {
  margin-left: 5px;
}
</style>